<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>产品管理</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">

  <!-- 日期选择器引入依赖 -->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/style.css" />
  <style>
    .case {
      margin-top: 2px
    }

    .ECalendar {
      width: 200px;
      height: 35px;
    }
  </style>

  <!-- 引入分页依赖 -->
  <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <link type="text/css" rel="stylesheet" charset="UTF-8"
    href="https://translate.googleapis.com/translate_static/css/translateelement.css">

  <!-- vue+axios -->
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body class="hold-transition sidebar-mini">
  <div class="wrapper">

    <div id="app">
      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div style="background-color: antiquewhite; margin-left: 1%; margin-right: 1%;">
          <nav class=" navbar navbar-expand navbar-white navbar-light">
            <ul class="navbar-nav nav-sidebar col-sm-6">

              <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#exampleModal">
                  <i class="fas fa-plus nav-icon"></i>
                  <p>新增产品</p>
                </a>
                <!-- 新增产品 -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                  aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">新增产品 </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">品类分类</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="gmname">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">产品线</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="line">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">品类</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="category">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">状态</label>
                          <div class="col-sm-8">
                            <select class="selectpicker show-tick form-control" v-model="status">
                              <option disabled value="">请选择:0上架,1下架</option>
                              <option>0</option>
                              <option>1</option>
                            </select>
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="submit">提交</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 1新增产品 -->
              </li>
              <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link"> <i
                    class="nav-icon fas fa-space-shuttle"></i>
                  <p>推送</p>
                </a></li>
            </ul>
            <!-- <ul class="navbar-nav nav-sidebar col-sm-2">
              <div class="case">
                <div class="calendarWarp" style="">
                  <input type="text" name="date" class='ECalendar' id="ECalendar_case1" placeholder="选择日期" />
                </div>
              </div>
            </ul>
            <ul class="navbar-nav nav-sidebar col-sm-3">

              <input type="text" placeholder="请输入入库单号" />
              <button class="btn btn-primary">搜索</button>
            </ul> -->

          </nav>

        </div>

      </div>

      <div class="content-body">
        <div style="background-color: antiquewhite; margin-left: 1%; margin-right: 1%;">

          <!-- 前前 -->
          <div class="card">

            <!-- /.card-header -->
            <div class="card-body">
              <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="row">
                  <div class="col-sm-12">
                    <table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
                      aria-describedby="example1_info">
                      <thead>
                        <tr role="row">
                          <!-- <th class="sorting_asc" tabindex="0" aria-controls="example1"
														rowspan="1" colspan="1"></th> -->
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">品类分类</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">产品线</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">品类</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">创建时间</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">状态</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">详情</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">分享</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">修改</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">下载</th>
                        </tr>
                      </thead>
                      <tbody>
                      <tr role="row" class="odd" style="display: none;">
                              <td class="" tabindex="0">Gecko</td>
                              <td style="">Epiphany 2.20</td>
                              <td style="">Gnome</td>
                              <td style="">Epiphany 2.20</td>
                              <td style="">Gnome</td>
                              <td style="">Epiphany 2.20</td>
                              <td style="">Gnome</td>
                              <td style="">Gnome</td>
                              <td  style="">1.8</td>
                       </tr>
                        <!-- <td><span style="font-size:13px;color:#00A854;">●</span>上架</td> -->
                        <tr v-for="good in goods">
                          <!-- <td>
														<div class="icheck-primary">
                                                            <input type="checkbox" value="">
                                                        </div>
                                                    </td> -->
                          <td>{{good.gmname}}</td>
                          <td>{{good.line}}</td>
                          <td>{{good.category}}</td>
                          <td>{{good.time}}</td>
                          <td>
                            <div v-if="good.status == 0">
                              <span style="font-size: 13px; color: #F04134;">●</span>下架
                            </div>
                            <div v-else>
                              <span style="font-size: 13px; color: #00A854;">●</span>上架
                            </div>
                          </td>
                          <td><a href="#" class="nav-link" data-toggle="modal" data-target="#exampleModal_xianqin"
                              @click="showpickgoods(good.gmid)"> <img src="images/详情.png" height="40px">
                            </a> <!-- 查看当前列数据 -->
                            <div class="modal fade" id="exampleModal_xianqin" tabindex="-1" role="dialog"
                              aria-labelledby="exampleModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">产品详情
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">品类分类:</label>
                                      <div class="col-sm-8">
                                        <h4>{{rowGoods.category}}</h4>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">产品线:</label>
                                      <div class="col-sm-8">
                                        <h4>{{rowGoods.line}}</h4>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">品类:</label>
                                      <div class="col-sm-8">
                                        <h4>{{rowGoods.gmname}}</h4>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">状态:</label>
                                      <div class="col-sm-8">
                                        <h4>
                                          <div v-if="rowGoods.status == 0">
                                            <span style="font-size: 13px; color: #F04134;">●</span>下架
                                          </div>
                                          <div v-else>
                                            <span style="font-size: 13px; color: #00A854;">●</span>上架
                                          </div>
                                        </h4>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>

                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                                  </div>
                                </div>
                              </div>
                            </div> <!--  -->
                          </td>
                          <td><img src="images/分享.png" height="40px"></td>
                          <td><a href="#" class="nav-link" data-toggle="modal" data-target="#exampleModal_xiugai"
                              @click="showpickgoods(good.gmid)"> <img src="images/修改.png" height="40px">
                            </a> <!-- 修改产品 -->
                            <div class="modal fade" id="exampleModal_xiugai" tabindex="-1" role="dialog"
                              aria-labelledby="exampleModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">修改信息
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">品类分类</label>
                                      <div class="col-sm-8">
                                        <input type="text" class="form-control" v-model="newGmname">
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">产品线</label>
                                      <div class="col-sm-8">
                                        <input type="text" class="form-control" v-model="newLine">
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">品类</label>
                                      <div class="col-sm-8">
                                        <input type="text" class="form-control" v-model="newCategory">
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-3 col-form-label">状态</label>
                                      <div class="col-sm-8" style="">
                                        <select class="selectpicker show-tick form-control" v-model="newStatus">
                                          <option disabled value="">请选择:0上架,1下架</option>
                                          <option>0</option>
                                          <option>1</option>
                                        </select>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>

                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary"
                                      @click="modify(rowGoods.gmid)">确定修改</button>
                                  </div>
                                </div>
                              </div>
                            </div> <!-- 1新增产品 -->
                          </td>
                          <td><img src="images/下载.png" height="40px"></td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <!-- <th rowspan="1" colspan="1"></th> -->
                          <th rowspan="1" colspan="1">品类分类</th>
                          <th rowspan="1" colspan="1">产品线</th>
                          <th rowspan="1" colspan="1">品类</th>
                          <th rowspan="1" colspan="1">创建时间</th>
                          <th rowspan="1" colspan="1">状态</th>
                          <th rowspan="1" colspan="1">详情</th>
                          <th rowspan="1" colspan="1">分享</th>
                          <th rowspan="1" colspan="1">修改</th>
                          <th rowspan="1" colspan="1">下载</th>
                        </tr>
                      </tfoot>
                    </table>
                    <!-- <div class="d-flex">
											<p class="d-flex flex-column" style="margin-top: 20px">
												<span class="text-bold text-lg">&nbsp;&nbsp;&nbsp;
												多选框
												<button type="button" class="btn btn-default btn-sm checkbox-toggle">
                                                        <i class="far fa-square"></i>
                                                </button>&nbsp;全选&nbsp;&nbsp;&nbsp;共 1342 条数据</span>
											</p>
										</div> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- 后后  -->

        </div>
      </div>

    </div>

  </div>
  <!-- ./wrapper -->


  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        goods: [],
        rowGoods: [],

        /* 新增产品 */
        gmname: "",
        line: "",
        category: "",
        status: 1,

        /* 修改详情 */
        newGmname: "",
        newLine: "",
        newCategory: "",
        newStatus: "",
      },
      //查询所有数据
      mounted() {
        axios
          .get('/goods/all/')
          .then(res => {
            console.info(res.data);
            this.goods = res.data;
          })
      },

      methods: {
        //通过gmid查询当条数据 
        showpickgoods: function (gmid) {
          //alert(gmid);
          axios
            .get("/goods/searchData", {
              params: {
                gmid: gmid
              }
            })
            .then(res => {
              console.info(res.data);
              this.rowGoods = res.data;
            })
        },

        //新增产品
        submit: function () {
          var goods = new URLSearchParams();
          goods.append("gmname", this.gmname);
          goods.append("line", this.line);
          goods.append("category", this.category);
          goods.append("status", this.status);
          axios.post('/goods/addGoods', goods).then(res => {
            alert(res.data.message);
            window.location.href = "product_management.html";
          });
        },

        //修改数据
        modify: function (gmid) {
          axios
            .get("/goods/modifyGoods", {
              params: {
                gmid: gmid,
                gmname: this.newGmname,
                line: this.newLine,
                category: this.newCategory,
                status: this.newStatus,
              }
            })
            .then(res => {
              alert(res.data.message);
              window.location.href = "product_management.html";
            })
        },
      }
    });
  </script>
  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="../../dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="../../plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="../../dist/js/pages/dashboard3.js"></script>

  <!-- 日期选择器 -->
  <script src="js/jquery.min.js"></script>
  <script src="js/Ecalendar.jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#ECalendar_case1").ECalendar({
        type: "date",
        skin: "#233",
        offset: [0, 2]
      });
    })
  </script>

  <!-- 引入分页依赖 -->
  <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="../../dist/js/adminlte.min.js"></script>
  <script>
    $(function () {
      $("#example1").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
      });
    });
  </script>

  <!-- 多选框 -->
  <script>
    $(function () {
      //Enable check and uncheck all functionality
      $('.checkbox-toggle').click(function () {
        var clicks = $(this).data('clicks')
        if (clicks) {
          //Uncheck all checkboxes
          $(' input[type=\'checkbox\']').prop('checked', false)
          $('.checkbox-toggle .far.fa-check-square').removeClass('fa-check-square').addClass(
            'fa-square')
        } else {
          //Check all checkboxes
          $(' input[type=\'checkbox\']').prop('checked', true)
          $('.checkbox-toggle .far.fa-square').removeClass('fa-square').addClass(
            'fa-check-square')
        }
        $(this).data('clicks', !clicks)
      })

      //Handle starring for glyphicon and font awesome
      $('.mailbox-star').click(function (e) {
        e.preventDefault()
        //detect type
        var $this = $(this).find('a > i')
        var glyph = $this.hasClass('glyphicon')
        var fa = $this.hasClass('fa')

        //Switch states
        if (glyph) {
          $this.toggleClass('glyphicon-star')
          $this.toggleClass('glyphicon-star-empty')
        }

        if (fa) {
          $this.toggleClass('fa-star')
          $this.toggleClass('fa-star-o')
        }
      })
    })
  </script>
</body>

</html>